<template>
    <div>
        <a-modal v-model:visible="modalVisible" title="修改昵称" @ok="handleOk" width="400px">
            <a-form class="query-list-form" :model="form" ref="formRef">
                <a-form-item label="昵称" name="nickname" :rules="[{ required: true, message: '请输入昵称' }]">
                    <a-input v-model:value="form.nickname" allowClear autocomplete="off" placeholder="请输入昵称" size="large" :maxlength="10">
                    </a-input>
                </a-form-item>
            </a-form>
        </a-modal>
    </div>
</template>

<script setup>
import { defineProps, defineEmits, computed, ref } from 'vue';
import { ZyNotification } from '@/libs/util.toast'
import { updateUserInfo } from 'api/modules/api.account'
import userInfoStore from '@/stores/userInfo.js'

const form = ref({})

const props = defineProps({
    modelValue: {
        type: Boolean,
    },
});

const emit = defineEmits(['update:modelValue', 'refreshInfo']);
const modalVisible = computed({
    get: () => props.modelValue,
    set: v => emit('update:modelValue', v),
});

// 确定按钮的回调
const formRef = ref();
const handleOk = () => {
    formRef.value.validateFields().then(() => {
        updateUserInfo(form.value).then(res => {
            if (res.code == 0) {
                ZyNotification.success('修改成功')
                emit('update:modelValue', false)
                userInfoStore().getUserInfo().then(() => { })
            }
        })
    })
};

</script>

<style lang="less" scoped>
.form-item-code {
    position: relative;
    border-radius: 6px;

    .get-code-btn {
        position: absolute;
        right: 0;
        width: 86px;
        height: 40px;
        border-radius: 6px;
        border: none;
        font-size: 14px;
        padding: 10px 8px;
        z-index: 100;
    }
}
</style>

